<template xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
  <div class="collection" v-loading.fullscreen.lock="fullscreenLoading">
    <div class="One_Jdbox">
      <div class="Jdbox_head">
        <img src="img\logo1.jpg" alt=""><span class="bank">收银台</span>
        <ul>
          <li><span>{{ userName }}</span><span style="margin-left: 5px;">退出</span></li>
          <li>我的订单</li>
          <li>支付帮助</li>
        </ul>
      </div>
      <div class="Jdbox_BuySuc">
        <dl>
          <dt><img :src="require('@/assets/pay/saoyisao.png')" alt=""></dt>
          <dd>
            <span>订单提交成功，请尽快付款！订单号：{{detail.order.orderSn}}</span>
            <span>应付金额<font> {{ detail.order.payAmount }} </font>元</span>
          </dd>
          <dd>
            <span>推荐使用</span>
            <img style="width: 20px;height: 20px;vertical-align:text-top;" :src="require('@/assets/pay/weixin.png')" alt="">
            <img style="width: 20px;height: 20px;vertical-align:text-top;" :src="require('@/assets/pay/zhifubao.png')" alt="">
            <span>扫码支付</span><span style="margin-left: 10px;margin-right: 10px;color: rgb(210,210,210)">|</span><span>请您在
            <font>
               {{ countdownHour }}:{{ countdownMinute }}:{{ countdownSecond }}
            </font>内完成支付，否则订单会被自动取消(库存紧订单请参见详情页时限)</span>
            <span @click="orderDetail = !orderDetail">订单详细<i :class="orderDetail ? 'el-icon-caret-bottom' : 'el-icon-caret-top'"></i></span>
          </dd>
        </dl>
      </div>

      <div style="width: 940px;margin: 20px auto;font-style: normal;font-size: 10px;font-weight: 400;color: rgb(130,130,130);line-height: 25px;" v-show="orderDetail">
        <hr>
        <div style="margin-top: 10px">
          <span>收货地址：{{ detail.order.receiverProvince }}{{ detail.order.receiverCity }}{{ detail.order.receiverRegion }}{{ detail.order.receiverDetailAddress }}</span>
          <span style="margin-left: 20px;">收货人：
            {{ detail.order.receiverName.replace(detail.order.receiverName.substring(0, detail.order.receiverName.length - 1), "**") }}
            {{ detail.order.receiverPhone.replace(detail.order.receiverPhone.substring(0, detail.order.receiverPhone.length - 4), "*******") }}</span>
        </div>
        <div>
          <span>商品名称：</span>
          <span style="margin-right: 40px;" v-for="list in detail.orderItemEntityList" :key="list.id">{{ list.skuName }}</span>
        </div>
      </div>

      <div class="Jd_Con">
        <p class="JdCon_title"><img :src="require('@/assets/pay/title.png')" alt=""></p>
        <div class="Jd_main">
          <ul>
            <li>
              <span>
                <img :src="require('@/assets/pay/BAITIAO_2.0.png')" alt="">打白条
              </span>
              <span style="font-size: 12px; color: rgb(120,120,120)">可用额度1000</span>
              <hr style="width: 900px;margin-top: 10px;background-color: rgb(200,200,200);height: 1px;border: none">
            </li>
            <li>
              <span>
                <img :src="require('@/assets/pay/XJKCONSUME.png')" alt="">MaxLen小金库
              </span>
              <span style="font-size: 12px; color: rgb(120,120,120)">未开通</span>
              <hr style="width: 900px;margin-top: 10px;background-color: rgb(200,200,200);height: 1px;border: none">
            </li>
            <li>
              <span style="width: 160px;display: inline-block;font-size: 16px;font-weight: bold;">
                <img :src="require('@/assets/pay/yinhang.png')" alt="">建设银行
              </span>
              <span style="font-size: 12px; color: rgb(120,120,120)">储蓄卡(4337)</span>
              <hr style="width: 900px;margin-top: 10px;background-color: rgb(200,200,200);height: 1px;border: none">
            </li>
            <li>
              <button style="background-color: red;color: white;width: 200px;height: 50px;border: 0px;font-size: 16px;font-weight: bold;margin-bottom: 10px;margin-left: 700px;">立即支付</button>
            </li>
          </ul>
        </div>
      </div>
      <div class="Jd_footer">
        <ul>
          <li>
            <img :src="require('@/assets/pay/weixin.png')" alt="">微信支付
          </li>
          <li class="checkButtonPay" @click="ZFBPay">
            <img :src="require('@/assets/pay/zhifubao.png')" style="weight:auto;height:30px;" alt="">支付宝
          </li>
        </ul>
      </div>
      <div class="Jd_foots">
        <p>
          <span>Copyright @2004-2017 谷粒学院gulimall.com 版权所有</span>
          <span>
            <img :src="require('@/assets/pay/foots.png')" alt="">
          </span>
        </p>
      </div>
    </div>

    <div v-html="payHTML"></div>
  </div>
</template>

<script>

import {getName} from "@/utils/login-token";

export default {
  name: "index",
  data() {
    return {
      orderDetail: false,
      userName: null,
      payHTML: null,
      fullscreenLoading: false,
      detail: {
        order: {
          payAmount: 0,
          orderSn: null,
          receiverProvince: null,
          receiverCity: null,
          receiverRegion: null,
          receiverDetailAddress: null,
          receiverName: null,
          receiverPhone: null
        },
        orderItemEntityList: []
      },
      // now是实时的时间，也就是流动的时间
      now: NaN,
      // time是设定的倒计时，如3分钟，换算成和timestamp一样的单位，就是3 * 60e3 = 180000
      // 需要自己定义倒计时时间
      time:6000
    }
  },
  created() {
    this.getPay()
    const update = () => {
      // 也是循环调用自身,这次会在一开始就更新this.now
      this.now = Date.now();
      // requestAnimationFrame接受一个参数，这个参数是一个函数
      // 因为在update里调用requestAnimationFrame(update)，相当于设定下次屏幕刷新前执行一下update
      // 那么下次执行update的时候，又会设置下一帧要调用update
      //更新的事件由API把握
      //requestAnimationFrame在下次屏幕刷新前,所以不同的显示器，刷新率不一样，调用的次数也不同,但是，能保证，每次重绘的时候总是最新的时间
      requestAnimationFrame(update);
    };
    update();
  },
  methods: {
    getPay(){
      this.detail = JSON.parse(this.$route.query.data)
      console.log(this.detail)
      this.$store.dispatch("order/order/getOrderTime", this.detail.order.orderSn)
        .then((data)=>{
          this.time = Number(data.data)
          console.log(this.time)
        })
        .catch(()=>{})

      this.userName = getName()
    },
    ZFBPay(){
      this.fullscreenLoading = true
      this.$store.dispatch("order/order/ZFBPay", this.detail.order.orderSn)
        .then((data)=>{
          // console.log(data.data)
          // this.payHTML = data.data
          // this.$nextTick(() => {
          //   document.forms[0].submit(); //这里就是获取第一个表单并提交
          // })
          this.$message({
            message: '支付成功',
            type: 'success'
          })
          this.$router.push("/order-tag")
        })
        .catch(()=>{})
    },
    dateFormat(date) {
      const hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      const minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      const seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return (hours + ":" + minutes + ":" + seconds);
    }
  },
  computed: {
    // 结束时间
    finishTime() {
      //这里并没有用this.now,因为this.now记录的是实时时间
      //这里的是设定的时间+设定的倒计时毫秒数
      return Date.now() + this.time;
      //this.time的变化，触发这个结束的时间，只要this.time不更新，结束时间就不会重新计算，所以结束时间一直固定
    },
    //剩余的毫秒数
    countdown() {
      //倒计时不会小于0，也就是说countdown最小值是0
      return Math.max(0, this.finishTime - this.now);
    },
    // 时
    countdownHour() {
      //padStart是用于补位
      return String.prototype.padStart.call(
        (this.countdown / 3.6e6) | 0,
        2,
        "0"
      );
    },
    // 分
    countdownMinute() {
      return String.prototype.padStart.call(
        ((this.countdown % 3.6e6) / 6e4) | 0,
        2,
        "0"
      );
    },
    // 秒
    countdownSecond() {
      return String.prototype.padStart.call(
        ((this.countdown % 6e4) / 1e3) | 0,
        2,
        "0"
      );
    }
  },
  // 监听时间到了：
  watch: {
    countdown(countdown) {
      if (0 === countdown) {
        this.$message({
          message: '订单过期，请重新下单',
          type: 'error'
        })
        this.$router.push('/cart')
      }
    },
  }
}
</script>

<style lang="scss" scoped>

.collection {
  height: 968px;
  width: 100%;
  background-color: rgb(245, 245, 245);

  .settlement{
    width: 1300px;
    margin: 0 auto;
  }
}

.checkButtonPay{
  &:hover{
    cursor: pointer;
  }
}

*{
  margin:0;
  padding:0;
  box-sizing: border-box;
  font-size: 14px;
}
html,body{
  background: #FFFFFF;
}
ul,li{
  list-style: none;
}
a{
  text-decoration: none;
}
.bank{
  display:inline-block;
  padding-top:13px;
  font-size:20px;
}
.One_Jdbox{
  width:1000px;
  margin:0 auto;
}
.Jdbox_head img,.Jdbox_head ul{
  float:left;
}
.Jdbox_head{
  height:60px;
  padding:15px 0;
}
.Jdbox_head ul{
  float:right;
  height:28px;
}
.Jdbox_head ul li{
  float:left;
  border-right:1px solid #E3DDDF;
  padding:0 7px;
  color:#666666;
}
.Jdbox_head ul li:last-child{
  border-right:none;
}
.Jdbox_BuySuc{
  clear:left;
  width:1000px;
  height:100px;
}
.Jdbox_BuySuc dl dt,.Jdbox_BuySuc dl dd{
  float:left;
}
.Jdbox_BuySuc dl dt{
  border:1px solid #FB9D9D;
  padding:3px;
}
.Jdbox_BuySuc dl dt img{
  width:90px;
  height:90px;
  vertical-align: middle;
}
.Jdbox_BuySuc dl dd{
  width:892px;
  margin:2px 0;
  margin-left:10px;
  color:#333333;
}
.Jdbox_BuySuc dl dd:nth-child(2){
  margin-top:25px;
}
.Jdbox_BuySuc dl dd:nth-child(2) span:last-child font{
  font-size: 17px;
  color:#E31613;
  font-weight: bold;
}
.Jdbox_BuySuc dl dd:last-child span{
  font-size: 12px;
}
.Jdbox_BuySuc dl dd:last-child span:first-child{
  //margin-right:20px;
}
.Jdbox_BuySuc dl dd:last-child span:nth-child(2) font{
  color:#E21612;
  font-size: 10px;
}
.Jdbox_BuySuc dl dd:last-child span:last-child{
  font-size: 14px;
  color:#67A4FF;
  margin-right:15px;

  &:hover{
    cursor: pointer;
    color: rgb(60,133,39);
  }
}
.Jdbox_BuySuc dl dd span:last-child{
  float:right;
}
.Jd_Con{
  clear:left;
  width:1000px;
  background: white;
  box-shadow:0px 5px 5px 5px #E9E9E9;
  margin-top:20px;
}
.Jd_Con .JdCon_title{
  padding:10px 0;
  padding-left:30px;
}
.Jd_Fenqi{
  margin:5px 20px;
  //border:2px solid #B0C2E1;
  border-radius: 3px;
  height:50px;
  padding:20px 0;
}
.Jd_Fenqi>ul{
  display: flex;
  justify-content: space-around;
}
.Jd_Fenqi>ul>li span{
  border-right:1px solid #DFDFE6;
  padding:0 5px;
}
.Jd_Fenqi>ul>li span:last-child{
  border-right:none;
}
.Jd_Fenqi>ul>li:first-child img{
  width:30px;
  height:30px;
  vertical-align: middle;
}
.Jd_Fenqi>ul>li:first-child{
  font-size: 16px;
  font-weight: bold;
}
.Jd_Fenqi>ul>li:nth-child(2) span{
  color:#666666;
  font-size: 12px;
}
.Jd_Fenqi>ul>li:nth-child(2) span:last-child{
  color:#E31613;
}
.Jd_Fenqi>ul>li:nth-child(2) span:last-child font{
  background: #E31613;
  color:white;
  border-radius: 3px;
  margin:0 2px;
  padding:1px 3px;
}
.Jd_Fenqi>ul>li:last-child font{
  font-size: 16px;
  color:#E31613;
  font-weight: bold;
}
.Jd_Fenqi ol{
  display: flex;
  text-align: center;
  margin:0 auto;
  width:450px;
}
.Jd_Fenqi ol li{
  border:1px solid #C9DFFF;
  border-radius: 3px;
  width:80px;
  text-align: center;
  margin:0 5px;
}
.Jd_Fenqi ol li p:first-child{
  font-weight: bold;
  color:#666666;
}
.Jd_Fenqi ol li p:last-child{
  color:#999999;
}
.Jd_Fenqi ol li:first-child{
  border:1px solid #E31613;
}
.Jd_Fenqi ol li:first-child p{
  color:#E31613;
}
.Jd_Fenqi ol li:first-child p:first-child{
  font-weight: bold;
}
.Jd_Fenqi ol li p{
  margin:0;
  text-align: center;
  padding:3px 5px;
}
.Jd_main ul li{
  padding:10px 0;
  padding-left:30px;
  margin:0 20px;
}
.Jd_main ul li:first-child,.Jd_main ul li:nth-child(2){
  //border-bottom: 1px solid #DDDDDD;
}
.Jd_main ul li:first-child{
  //color:gray;
}
.Jd_main ul li:first-child span:first-child,.Jd_main ul li:nth-child(2) span:first-child{
  font-size: 16px;
  width:160px;
  display: inline-block;
  font-weight: bold;
}
.Jd_main ul li:nth-child(2) span:nth-child(2){
  margin-right:15px;
  font-size: 12px;
  color: rgb(120, 120, 120);
}
.Jd_main ul li:nth-child(2) span:last-child{
  color:#E31613
}
.Jd_main ul li:nth-child(2) span font{
  border:1px solid #E31613;
  border-radius: 3px;
  //margin:0 2px;
  padding:0 3px;
  margin-right: 5px;
}
.Jd_main ul li span:first-child img{
  width:30px;
  height:30px;
  vertical-align: middle;
  margin-right:10px;
}
.Jd_main ul li:nth-child(3) button{
  background: white;
  border:1px solid #E0E0E0;
  color:#67A4FF;
  padding:8px 25px;
  outline: none;
}
.Jd_main ul li:nth-child(4) input{
  height:40px;
  outline: none;
  border-radius: 5px;
  border:1px solid #E0E0E0;
  text-align: center;
}
.Jd_main ul li:nth-child(4) p{
  color:#999999;
}
.Jd_main ul li:nth-child(4) span{
  color:#67A4FF;
  margin-left:8px;
}
.Jd_main ul li:nth-child(5) button{
  width:200px;
  height:50px;
  background:red;
  border:none;
  color:white;
  text-align: center;
  line-height: 50px;
  //border-radius: 5px;
  outline: none;
  font-size: 16px;
  font-weight: bold;
}
.Jd_footer{
  box-shadow:0px 5px 5px 5px #E9E9E9;
  margin-top:30px;
  margin-bottom:50px;
}
.Jd_footer ul{
  height:70px;
  padding:20px 15px;
  background-color: white;
}
.Jd_footer ul li{
  float:left;
  padding:0 10px;
  font-size: 16px;
  color:#5E5E5E;
}
.Jd_footer ul li:first-child{
  border-right: 1px solid #E3DDDF;
}
.Jd_footer ul li img{
  vertical-align: middle;
  margin-right: 6px;
}
.Jd_foots{
  border-top:1px solid #DDDDDD;
  padding:15px 0;
}
.Jd_foots p{
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.Jd_foots p span{
  color:#626262;
  font-size: 12px;
  margin:0 5px;
}

</style>
